import React from 'react';
import type { BusinessStatistics as StatsType } from '../../types/business';

interface BusinessStatisticsProps {
  statistics: StatsType;
}

const BusinessStatistics: React.FC<BusinessStatisticsProps> = ({ statistics = { total: 0, inProgress: 0, completed: 0 } }) => {
  const statItems = [
    {
      label: '评估计划总数',
      value: statistics.total,
      color: 'bg-slate-100 text-slate-800',
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
          <path fillRule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clipRule="evenodd" />
        </svg>
      ),
    },
    {
      label: '进行中',
      value: statistics.inProgress,
      color: 'bg-blue-100 text-blue-800',
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
        </svg>
      ),
    },
    {
      label: '已完成',
      value: statistics.completed,
      color: 'bg-green-100 text-green-800',
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
        </svg>
      ),
    },
  ];

  return (
    <div className="grid grid-cols-3 gap-4">
      {statItems.map((item, index) => (
        <div
          key={index}
          className={`${item.color} p-4 rounded-lg shadow-sm flex items-center`}
        >
          <div className="mr-3">
            {item.icon}
          </div>
          <div>
            <h3 className="text-sm font-medium">{item.label}</h3>
            <p className="text-2xl font-semibold">{item.value}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default BusinessStatistics;
